<template>
  <div>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="门店图片" align="center" prop="pic">
        <template slot-scope="scope">
          <img v-bind:src="scope.row.pic" class="img-circle-shop img-lg-shop"/>
        </template>
      </el-table-column>
      <el-table-column label="门店名称" align="center" prop="name" width="200"/>
      <el-table-column label="门店地址" align="center" prop="address"/>
      <el-table-column label="门店联系人" align="center" prop="linkman"/>
      <el-table-column label="门店营业时间" align="center" prop="businessHours"/>
      <el-table-column label="门店电话" align="center" prop="shopTel"/>
      <el-table-column label="门店状态" align="center" prop="status">
        <template v-slot:default="scope">
          {{ getStatusLabel(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope" v-if="scope.row.userId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:user:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleBrancher(scope.row)"
            v-hasPermi="['system:user:resetPwd', 'system:user:edit']"
          >任命店长
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:user:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <add-store ref="addStore" :status-options="statusOptions" :shop-ranges-option="shopRangesOption"/>
  </div>
</template>

<script>

import {delStores, storesRoleList} from "@/api/merchant/stores";
import addStore from "@/views/stores/computed/addStore";
import {listData} from "@/api/system/dict/data";
import {getCityList} from "@/api/option";

export default {
  props: ['total', 'loading', 'list'],
  name: "stores",
  components: {addStore},
  data:{
    total:0,
    page:{
      pageNum:0,
      pageSize:10
    },
    statusOptions: [{
      value: '营业',
      label: 1
    }, {
      value: '关闭',
      label: 0
    }],
  },
  shopRangesOption: [],
  methods: {
    handleSelectionChange(){
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.addStore.open(row)
    },
    /** 删除按钮操作 */
    handleDelete(item) {
      let storesId = item.id || this.ids
      this.$modal.confirm('是否确认删除门店编号为"' + storesId + '"的数据项？').then(function () {
        return delStores(storesId);
      }).then(() => {
        window.parent.location.reload()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleBrancher(item) {
      let storesId = item.id || this.ids
      this.$router.push('/stores/auth-branch/role/' + storesId);
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () {
        return changeUserStatus(row.userId, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    getStatusLabel(dictValue) {
      for (let i = 0; i < this.statusOptions.length; i++) {
        if (this.statusOptions[i].dictValue == dictValue) {
          return this.statusOptions[i].dictLabel
        }
      }
    },
    init() {
      getCityList({pid: 0}).then(res => {
        if (res.code === 200) {
          this.provinceOption = res.data
        }
      })
      listData({
        dictType: 'shop_ranges'
      }).then(res => {
        this.shopRangesOption = res.rows
      })
      listData({
        dictType: 'shop_status'
      }).then(res => {
        this.statusOptions = res.rows
      })
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="scss">

</style>
